<template>
	<view class="order-status">
		<view class="status" :style="{ background: bg, boxShadow: '' }">
      <view class="title u-font-30">{{title}}</view>
      <view class="sub u-font-22">{{sub}}</view>
    </view>
    
    <view class="address flex-col justify-center" style="width: 380rpx;height: 160rpx;">
      <view class="flex-row u-line-1">
        <view class="name u-font-28">大华</view>
        <view class="phone u-font-28 u-m-l-16">18677423145</view>
      </view>
      <view class="add u-font-24 u-line-2 u-p-t-16">
        河南省郑州市金水区商务内环九如路海逸名门23号楼一单元6楼601
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    props: {
      bg: {
        type: String,
        default: '#FFBB59'
      },
      title: String,
      sub: String
    },
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
  .order-status {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .status {
      width: 240rpx;
      height: 162rpx;
      padding: 24rpx 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 12rpx;
      color: #fff;
      position: relative;
      overflow: hidden;
      
      &::after {
        width: 40rpx;
        height: 40rpx;
        content: '';
        background: #fff;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%) rotate(45deg);
        z-index: 9;
      }
    }
    
    .address {
      color: #999;
    }
  }
</style>
